<template>
  <div class>
    <el-row >
      <el-col :span="6">
        <div class style="background:#fff; padding:10px;">
          <el-switch
            style="margin-bottom:10px;"
            v-model="organRecurFlag"
            @change="getUsers"
            active-text="含下级"
            inactive-text="不含下级"
          ></el-switch>
          <el-input
            placeholder="输入关键字进行查询"
            size="mini"
            prefix-icon="el-icon-search"
            v-model="filterText"
          ></el-input>
        </div>
        <!-- <el-card> -->
        <el-tree
          style="min-height:calc(100vh - 210px);"
          highlight-current
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          :props="props"
          :data="data"
          node-key="id"
          :default-expanded-keys="defauleArr"
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </el-col>
      <el-col :span="18" style="background:#fff;padding:10px;min-height:calc(100vh - 140px);">
        <el-dialog title="机构信息" width="700px" :visible.sync="dialogOrgan">
          <!-- <el-dropdown class="btns" @command="handleCommand">
            <el-button size="mini" type="primary" class="el-icon-plus">
              增加
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="部门" @click="addItem">部门</el-dropdown-item>
              <el-dropdown-item command="职员" @click="showDialog">职员</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button size="mini" type="primary" @click="editItem" class="el-icon-edit">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteItem" class="el-icon-delete">删除</el-button>-->
          <el-form :model="form" :rules="rules" ref="form" label-width="120px" inline size="mini">
            <el-row>
              <my-form-item label="上级部门名称" prop="superName">
                <el-input v-model="form.superName" disabled style="width:200px"></el-input>
              </my-form-item>
              <my-form-item label="本级部门编号" prop="organCode">
                <el-input v-model="form.organCode" disabled style="width:200px"></el-input>
              </my-form-item>
            </el-row>
            <el-row>
              <my-form-item label="启用状态" prop="status">
                <el-select v-model="form.status" :disabled="justshow" style="width:200px">
                  <el-option label="启用" :value="1"></el-option>
                  <el-option label="禁用" :value="2"></el-option>
                </el-select>
              </my-form-item>
              <my-form-item label="本级部门名称" prop="organName">
                <el-input v-model="form.organName" :disabled="justshow" style="width:200px"></el-input>
              </my-form-item>
            </el-row>
            <el-row>
              <my-form-item label="本级部门简码" prop="shortName">
                <el-input v-model="form.shortName" :disabled="justshow" style="width:200px"></el-input>
              </my-form-item>
              <my-form-item label="显示顺序" prop="displayOrder">
                <el-input v-model="form.displayOrder" :disabled="justshow" style="width:200px"></el-input>
              </my-form-item>
            </el-row>
            <el-row>
              <my-form-item label="部门类型" prop="organType">
                <el-select v-model="form.organType" :disabled="justshow" style="width:200px;">
                  <el-option label="公司" value="1"></el-option>
                  <el-option label="部门" value="2"></el-option>
                </el-select>
              </my-form-item>
              <my-form-item label="是否独立建账" prop="dependentAccount">
                <el-select v-model="form.dependentAccount" :disabled="justshow" style="width:200px">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </my-form-item>
            </el-row>

            <my-form-item label="节点位置" v-show="isAdd">
              <el-radio-group v-model="nodeType" @change="nodeTypeChange">
                <el-radio label="1">兄弟节点</el-radio>
                <el-radio label="2">子节点</el-radio>
              </el-radio-group>
            </my-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer" v-show="!justshow">
            <el-button size="mini" @click="cancle">取 消</el-button>
            <el-button size="mini" type="primary" @click="ok">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 机构用户 -->
        <div class="card" style="display:flex;justify-content: space-between;item-align:center;">
          <span>部门名称：{{chackedNode.organName}}</span>
          <div class>
            <el-button size="mini" type="primary" @click="editItem" class="el-icon-edit">修改</el-button>
            <el-button size="mini" type="danger" @click="deleteItem" class="el-icon-delete">删除</el-button>

            <!-- <el-button type="primary" size="mini" @click="dialogOrgan = true;">操作</el-button> -->
          </div>
        </div>
        <div class="card">
          <el-form size="mini" label-width="80px" inline :model="searchForm">
            <my-form-item label="是否领导">
              <el-select
                clearable
                v-model="searchForm.leader"
                size="mini"
                @change="getUsers"
                placeholder="请选择"
              >
               <el-option label="全部" value=""></el-option>
                <el-option label="是" value="1"></el-option>
                <el-option label="否" value="0"></el-option>
              </el-select>
            </my-form-item>
          </el-form>
        </div>
        <el-tabs type="border-card" v-model="userOrganType" @tab-click="tabsClick">
          <el-tab-pane label="机构用户" name="0">
            <el-table stripe :data="tableData" :max-height="autoH" border style="width: 100%;">
              <el-table-column type="index" width="60px" align="center" label="序号"></el-table-column>
              <el-table-column prop="realName" align="center" label="姓名"></el-table-column>
              <el-table-column prop="username" align="center" label="登录名"></el-table-column>
              <el-table-column prop="organName" align="center" label="所属部门"></el-table-column>
              <el-table-column
                prop="leader"
                align="center"
                :formatter="leaderStatusFilter"
                label="领导"
              >
                <!-- <template slot-scope="scope">
                  <span>{{scope.row.leader==1?"是":"否"}}</span>
                </template>-->
              </el-table-column>
              <!-- <el-table-column prop="telephone" width="120" align="center" label="固定电话"></el-table-column>
              <el-table-column prop="mobile" width="120" align="center" label="移动电话"></el-table-column>
              <el-table-column prop="createTime" width="180" align="center" label="创建时间"></el-table-column>-->
              <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="handleSeeMore(scope.row)">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="card" style="text-align:right;">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[ 10, 20,30, 40]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </div>
          </el-tab-pane>
          <el-tab-pane name="1" label="兼职用户">
            <!--组织机构中的用户信息-->
            <el-table stripe :data="tableData" border :max-height="autoH" style="width: 100%;">
              <el-table-column type="index" width="60px" align="center" label="序号"></el-table-column>
              <el-table-column prop="realName" align="center" label="姓名"></el-table-column>
              <el-table-column prop="username" align="center" label="登录名"></el-table-column>
              <el-table-column prop="organName" align="center" label="所属部门"></el-table-column>
              <!-- <el-table-column
                prop="authStatus"
                width="120"
                align="center"
                label="是否授权"
                :formatter="authStatusFilter"
              ></el-table-column>-->
              <el-table-column
                prop="leader"
                align="center"
                width="120"
                label="领导"
                :formatter="leaderStatusFilter"
              ></el-table-column>
              <!-- <el-table-column prop="createTime" width="180" align="center" label="创建时间"></el-table-column>
              <el-table-column prop="telephone" width="120" align="center" label="固定电话"></el-table-column>
              <el-table-column prop="mobile" width="120" align="center" label="移动电话"></el-table-column>-->
              <!-- <el-table-column label="操作" width="180px" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="updateDialog(scope.row)"
                    class="el-icon-edit"
                  >修改</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleteOrganUser(scope.row)"
                    class="el-icon-delete"
                  >删除</el-button>
                </template>
              </el-table-column> -->
            </el-table>
            <div class="card" style="text-align:right;">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[ 10, 20,30, 40]"
                :page-size="pageSize"
                background
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog title="所有用户" width="80%" :visible.sync="dialogAllUser" :fullscreen="fullscreen">
      <users ref="user" />
      <span slot="footer" class="dialog-footer">
        <el-button type="mini" plain @click="dialogAllUser = false">取消</el-button>
        <el-button size="mini" type="primary"  @click="dialogFile = true">保存</el-button>
      </span>
    </el-dialog>
    <!-- ---------------------------------------------------------浏览用户弹出框 -->
    <el-dialog title="用户详情" :visible.sync="dialogUser" width="70%">
      <searchUser ref="searchUser"></searchUser>
    </el-dialog>
    <el-dialog title="上传附件" width="300px" :visible.sync="dialogFile">
      <el-form size="mini" :model="fileForm" label-width="80px">
        <my-form-item label="是否领导" width="100%">
          <el-select v-model="fileForm.leader" autocomplete="off" style="width:400px;">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </my-form-item>
        <my-form-item label="备注" width="100%">
          <el-input
            v-model="fileForm.remark"
            placeholder="请输入说明"
            type="textarea"
            autocomplete="off"
          ></el-input>
        </my-form-item>
        <my-form-item label="附件">
          <el-upload
            class="upload-demo"
            :action="upUrl"
            :on-success="handleSuceess"
            :before-remove="beforeRemove"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </my-form-item>
        <my-form-item label="文件编码">
          <el-input v-model="fileForm.fileHashCode" autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="文件名称">
          <el-input v-model="fileForm.fileName" autocomplete="off"></el-input>
        </my-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="mini" plain @click="dialogFile = false">取消</el-button>
        <el-button size="mini" type="primary"  @click="saveOrganUser">保存</el-button>
      </span>
    </el-dialog>
    <!-- --------------------------------------------------------修改用户弹出框 -->
    <el-dialog title="修改用户" :visible.sync="dialogEditVisible">
      <el-form size="mini" :model="editForm" label-width="80px" ref="editForm" :rules="rules">
        <my-form-item label="职员账号">
          <el-input v-model="editForm.username" disabled autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="职员姓名" prop="realName">
          <el-input v-model="editForm.realName" disabled autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="部门名称">
          <el-input v-model="editForm.organName" disabled autocomplete="off"></el-input>
        </my-form-item>
        <my-form-item label="是否领导" width="100%">
          <el-select v-model="editForm.leader">
            <el-option label="否" value="0"></el-option>
            <el-option label="是" value="1"></el-option>
          </el-select>
        </my-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit1">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getMenuList1 } from "@/functions/menuList";
import { getUserListByRoleId } from "@/pages/auth/permission/function";
import users from "@/components/checkUser/uesrs.vue";
import searchUser from "@/pages/auth/organ/component/searchUserById.vue";
import {
  getList,
  deleteItem,
  addItem,
  addItem1,
  editItem,
  editItem3,
  // getUserByUserId,
  getUserByOrganCode
} from "./organ";

export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    users,
    searchUser
  },
  data() {
    return {
      defauleArr: [],
      userOrganType: "0",
      searchForm: {
        leader: ""
      },
      organRecurFlag: true,
      fullscreen: false,
      dialogEditVisible: false,
      dialogOrgan: false,
      filterText: "",
      fileList: [],
      upUrl:
        this.baseURL +
        "/api/file/upload?Auth-User-Token=" +
        sessionStorage.getItem("token"),
      total: 0,
      pageSize: 10,
      currentPage: 1,
      fileForm: {
        remark: "",
        fileHashCode: "",
        leader: "0",
        fileName: ""
      },
      dialogFile: false,
      nodeType: "1",
      organId: "",
      dialogUser: false,
      justshow: true,
      isAdd: false,
      dialogAllUser: false,
      dialogFormVisible: false,
      tableData: [],
      tableData1: [],
      editForm: {
        realName: "",
        organName: "",
        username: "",
        leader: ""
      },
      options: [],
      cascaderProps: {
        value: "organCode",
        label: "organName",
        children: "children"
      },
      form: {
        id: "",
        parentId: "",
        organCode: "",
        shortName: "",
        organName: "",
        organType: "",
        address: "",
        nodeType: "1",
        master: "",
        linkMan: "",
        linkpHone: "",
        postCode: "",
        remark: "",
        status: "",
        displayOrder: "",
        dependentAccount: "",
        superName: "",
        createUserId: "",
        createUserName: "",
        nodeKey: ""
      },
      rules: {
        parentId: [
          { required: true, message: "父级ID不能为空！", trigger: "blur" }
        ],
        shortName: [
          { required: true, message: "机构简称不能为空！", trigger: "blur" }
        ],
        organName: [
          { required: true, message: "机构全称不能为空！", trigger: "blur" }
        ],
        organType: [
          { required: true, message: "机构类型不能为空！", trigger: "blur" }
        ],
        status: [
          {
            required: true,
            type: "number",
            message: "状态不能为空！",
            trigger: "blur"
          }
        ]
      },
      chackedNode: {},
      data: [],
      props: {
        label: "organName",
        children: "children"
      }
    };
  },
  computed: {
    autoH(){
      return (window.innerHeight-380)+"px"
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    tabsClick() {
      this.total = 0;
      this.pageSize = 10;
      this.currentPage = 1;
      this.getUsers();
    },
    getUsers() {
      if (!this.chackedNode.id) {
        this.$message.error("请先选择部门！");
        return;
      }
      let params = {
        organId: this.chackedNode.id,
        userOrganType: this.userOrganType,
        organRecurFlag: this.organRecurFlag ? 1 : 0,
        leader: this.searchForm.leader,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      this.$api
        .formPost("/api/auth/sysuser/doGetOrganAllSysUserList", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.tableData = res.retBody.list;
            this.total = res.retBody.total;
            this.currentPage = res.retBody.pageNum;
          } else {
            this.$message({
              type: "error",
              message: res.retHead.message
            });
          }
        });
    },
    handleEdit1() {
      let { username, realName, organName, leader } = this.editForm;
      console.log(this.editForm);
      let params = {
        userId: this.editForm.id,
        organId: this.chackedNode.id,
        username,
        realName,
        organName,
        leader
      };
      editItem3(params).then(res => {
        this.dialogEditVisible = false;
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.$message({
            type: "success",
            message: "执行成功!"
          });
        } else {
          this.$message({
            type: "error",
            message: "执行失败!"
          });
        }
      });
    },
    updateDialog(row) {
      this.editForm = row;
      this.dialogEditVisible = true;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.organName.indexOf(value) !== -1;
    },
    authStatusFilter(row, column, cellValue) {
      if (cellValue == 0) {
        return "否";
      }
      if (cellValue == 1) {
        return "是";
      } else {
        return "";
      }
    },
    leaderStatusFilter(row, column, cellValue) {
      if (cellValue == 0) {
        return "否";
      }
      if (cellValue == 1) {
        return "是";
      }
    },
    handleSuceess(response, file, fileList) {
      this.fileForm.fileHashCode = response.retBody.fileHash;
      this.fileForm.fileName = file.name;
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    sizeChange(n) {
      this.pageSize = n;
      this.getUsers();
    },
    currentChange(n) {
      this.currentPage = n;
      this.getUsers();
    },
    clearAuthToUser(row) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let params = {
        id: row.userOrganId,
        changeUserId: user.id,
        authStatus: "0"
      };
      this.$api
        .formPost("/api/auth/sysUserOrgan/doModById", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.$message({
              type: "success",
              message: "取消成功!"
            });
            this.getUsers(this.chackedNode.id);
            this.dialogFile = false;
            this.dialogAllUser = false;
          } else {
            this.$message({
              type: "error",
              message: res.retHead.message
            });
          }
        });
    },
    authToUser(row) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let params = {
        id: row.userOrganId,
        changeUserId: user.id,
        authStatus: "1"
      };
      this.$api
        .formPost("/api/auth/sysUserOrgan/doModById", params)
        .then(res => {
          if (res.retHead.code == "0000000") {
            this.$message({
              type: "success",
              message: "授权成功!"
            });
            this.getUsers(this.chackedNode.id);
            this.dialogFile = false;
            this.dialogAllUser = false;
          } else {
            this.$message({
              type: "error",
              message: res.retHead.message
            });
          }
        });
    },
    deleteOrganUser(row) {
      let user = JSON.parse(sessionStorage.getItem("user"));
      // let checkedUsers = JSON.stringify(row) ;
      let params = {
        // userList: checkedUsers,
        userId: row.id,
        organId: this.chackedNode.id,
        changeUserId: user.id
      };
      this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          //删除
          this.$api
            .formPost("/api/auth/sysUserOrgan/deleteByUserIdAndOrganId", params)
            .then(res => {
              if (res.retHead.code == "0000000") {
                // this.init();
                this.getUsers(this.chackedNode.id);
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.retHead.message
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    saveOrganUser() {
      this.$nextTick(() => {
        let user = JSON.parse(sessionStorage.getItem("user"));
        let checkedUsers = this.$refs.user.selectedTableData;
        let params = {
          userList: checkedUsers,
          organId: this.chackedNode.id,
          organCode: this.chackedNode.organCode,
          organName: this.chackedNode.organName,
          changeUserId: user.id,
          leader: this.fileForm.leader,
          remark: this.fileForm.remark,
          fileHashCode: this.fileForm.fileHashCode,
          fileName: this.fileForm.fileName
        };
        this.$api.post("/api/auth/sysUserOrgan/doSave", params).then(res => {
          if (res.retHead.code == "0000000") {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            this.getUsers(this.chackedNode.id);
            this.dialogFile = false;
            this.dialogAllUser = false;
          } else {
            this.$message({
              type: "error",
              message: res.retHead.message
            });
          }
        });
      });
    },

    showDialog() {
      this.dialogAllUser = true;
      this.organId = this.chackedNode.id;
      // this.$nextTick(() => {
      //   this.$refs.users.init();
      // });
    },
    nodeTypeChange(v) {
      if (v == 1) {
        this.form.superName = this.chackedNode.superName;
      } else if (v == 2) {
        this.form.superName = this.chackedNode.organName;
      }
    },
    handleSeeMore(row) {
      this.dialogUser = true;
      let id = row.id;
      this.userId = id;
      this.$nextTick(() => {
        this.$refs.searchUser.init(this.userId);
      });
    },

    init() {
      getList().then(res => {
        console.log(res);
        if (res.retHead.code == "0000000") {
          this.data = res.retBody;
          let arr = [];
          this.data[0].children.forEach(item => {
            arr.push(item.id);
          });
          this.defauleArr = arr;
        }
      });
      this.chackedNode = {};
    },
    handleNodeClick(v) {
      this.tableData = [];
      this.tableData1 = [];
      this.justshow = true;
      this.isAdd = false;
      this.chackedNode = v;
      this.getUsers();
      for (let key in this.form) {
        this.form[key] = this.chackedNode[key];
      }
    },
    cancle() {
      this.dialogOrgan = false;
      // for (let key in this.form) {
      //   this.form[key] = this.chackedNode[key];
      // }
    },
    rule1() {
      if (!this.chackedNode.id) {
        this.$message.error("请先选取一个机构！");
        return false;
      } else {
        return true;
      }
    },
    ok() {
      if (this.isAdd) {
        this.handleAdd();
        this.dialogOrgan = true;
      } else {
        this.handleEdit();
      }
    },
    handleAdd() {
      this.form.nodeType = this.nodeType;
      if (this.form.nodeType == 1) {
        this.form.parentId = this.chackedNode.parentId;
      } else {
        this.form.parentId = this.chackedNode.id;
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          addItem(this.form).then(res => {
            if (res.retHead.code == "0000000") {
              this.$message.success("操作成功！");
              this.init();
            } else {
              this.$message.error("操作失败！");
            }
            this.justshow = true;
            this.isAdd = false;
          });
        }
      });
    },
    handleEdit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          editItem(this.form).then(res => {
            if (res.retHead.code == "0000000") {
              this.init();
              this.$message.success("操作成功！");
            } else {
              this.$message.error("操作失败！");
            }
            this.justshow = true;
          });
        }
      });
    },
    deleteItem() {
      if (this.rule1()) {
        let params = {
          //根据id删除
          id: this.chackedNode.id
        };
        this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            //删除
            deleteItem(params).then(res => {
              if (res.retHead.code == "0000000") {
                this.$message.success("删除成功！");
                this.init();
              } else {
                this.$message.error(res.retHead.message);
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    addItem() {
      this.nodeType = "1";
      if (this.rule1()) {
        this.justshow = false;
        this.isAdd = true;
        for (let key in this.form) {
          this.form[key] = "";
        }
        this.form.superName = this.chackedNode.superName;
        this.dialogOrgan = true;
      }
    },
    editItem() {
      if (this.rule1()) {
        this.isAdd = false;
        this.justshow = false;
        for (let key in this.chackedNode) {
          this.form[key] = this.chackedNode[key];
        }
        this.dialogOrgan = true;
      }
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.btns {
  margin-bottom: 10px;
  text-align: left;
}

.table {
  display: table;
  width: 100%;
  border: 1px solid #ccc;
  border-bottom: none;
  border-right: none;

  .row {
    display: table-row;

    .item {
      padding: 10px;
      display: table-cell;
      border: 1px solid #ccc;
      border-top: none;
      border-left: none;

      .lable {
        width: 100px;
        display: inline-block;
        font-weight: 700;
      }

      .lable:after {
        content: ":";
      }

      .value {
        display: inline-block;
      }
    }
  }
}
</style>